import React from 'react'
import { MoreHorizontal } from 'lucide-react'

interface TableRow {
  rank: number
  name: string
  visitors: string
  rate: string
  address?: string
  sales?: number
  orders?: number
}

interface DataTableProps {
  title: string
  data: TableRow[]
  onRowClick?: (row: TableRow) => void
  onViewAll?: () => void
  onMoreData?: () => void
}

const DataTable: React.FC<DataTableProps> = ({ title, data, onRowClick, onViewAll, onMoreData }) => {
  const getRankBadge = (rank: number) => {
    const baseClasses = "w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold text-white"
    
    switch (rank) {
      case 1:
        return `${baseClasses} bg-yellow-500`
      case 2:
        return `${baseClasses} bg-gray-400`
      case 3:
        return `${baseClasses} bg-orange-400`
      default:
        return `${baseClasses} bg-blue-500`
    }
  }

  const getRateColor = (rate: string) => {
    const numRate = parseInt(rate.replace('%', ''))
    if (numRate >= 30) return 'text-red-500'
    if (numRate >= 20) return 'text-orange-500'
    if (numRate >= 10) return 'text-blue-500'
    return 'text-green-500'
  }

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition-shadow duration-300">
      {/* 表格头部 */}
      <div className="px-6 py-5 bg-gradient-to-r from-gray-50 to-white border-b border-gray-100">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-lg font-bold text-gray-800 mb-1">{title}</h3>
            <p className="text-xs text-gray-500">实时排名数据</p>
          </div>
          <div className="flex items-center space-x-2">
            <button 
              onClick={onMoreData}
              className="px-4 py-2 text-blue-600 text-sm font-medium hover:bg-blue-50 rounded-lg transition-all duration-200 hover:scale-105"
            >
              更多数据
            </button>
            <button className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-all duration-200">
              <MoreHorizontal size={16} />
            </button>
          </div>
        </div>
      </div>

      {/* 表格内容 */}
      <div className="overflow-hidden">
        {/* 表头 */}
        <div className="bg-gradient-to-r from-gray-50 to-gray-100/50 px-6 py-4 border-b border-gray-100">
          <div className="grid grid-cols-12 gap-4 text-xs font-semibold text-gray-600 uppercase tracking-wider">
            <div className="col-span-1">排名</div>
            <div className="col-span-6">门店名称</div>
            <div className="col-span-3">访客数</div>
            <div className="col-span-2">日增率</div>
          </div>
        </div>

        {/* 表格数据 */}
        <div className="divide-y divide-gray-100">
          {data.map((row, index) => (
            <div 
              key={index} 
              onClick={() => onRowClick && onRowClick(row)}
              className={`px-6 py-4 hover:bg-gradient-to-r hover:from-blue-50/50 hover:to-purple-50/50 transition-all duration-200 group ${
                onRowClick ? 'cursor-pointer active:scale-[0.98]' : ''
              }`}
            >
              <div className="grid grid-cols-12 gap-4 items-center">
                {/* 排名 */}
                <div className="col-span-1">
                  <div className={`${getRankBadge(row.rank)} transform group-hover:scale-110 transition-transform duration-200 shadow-md`}>
                    {row.rank}
                  </div>
                </div>

                {/* 门店名称 */}
                <div className="col-span-6">
                  <div className="text-sm font-semibold text-gray-900 truncate group-hover:text-blue-600 transition-colors duration-200">
                    {row.name}
                  </div>
                </div>

                {/* 访客数 */}
                <div className="col-span-3">
                  <div className="text-sm font-bold text-gray-900">
                    {row.visitors}
                  </div>
                </div>

                {/* 日增率 */}
                <div className="col-span-2">
                  <div className={`inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold ${getRateColor(row.rate)}`}>
                    {row.rate}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 表格底部 */}
      <div className="px-6 py-4 bg-gradient-to-r from-gray-50 to-white border-t border-gray-100">
        <div className="flex items-center justify-between text-sm">
          <div className="text-gray-600 font-medium">共 <span className="text-blue-600 font-bold">{data.length}</span> 条记录</div>
          <div className="flex items-center space-x-2">
            <button 
              onClick={onViewAll}
              className="px-4 py-2 text-blue-600 font-medium hover:bg-blue-50 rounded-lg transition-all duration-200 hover:scale-105 border border-blue-200"
            >
              查看全部
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default DataTable


